import React, { FC, useEffect, useState } from 'react'
import style from '@/style/articles/swiper.module.scss'
import axios from '@/api/request'
import { Carousel } from 'antd'
import { useNavigate } from 'react-router-dom'
const Swiper: FC = () => {
  // 获取数据
  const [data, setData] = useState([])
  const navigate = useNavigate()
  useEffect(() => {
    // eslint-disable-next-line @typescript-eslint/no-floating-promises
    axios.get('/wipi/api/article/recommend').then(res => {
      setData(res.data)
    })
  }, [])

  // 转换时间
  const times: any = (t: any) => {
    const n = new Date().getTime() - new Date(t).getTime()
    const day = n / 3600 / 1000 / 24
    return Math.floor(day)
  }
  return <div className={style.swiper}>
    <Carousel autoplay>
      {
        data.map((item: any, index) => {
          return <div key={index} className={style.con} onClick={() => navigate('/detail', { state: item })}>
          <img src={item.cover} />
          <div className={style.box}>
            <h1>{item.title}</h1>
            <p>{times(item.createAt)}天前 . {item.views}次阅读</p>
          </div>
        </div>
        })
      }
  </Carousel>
  </div>
}

export default Swiper
